{{ define "title" }}
{{ .Title }} | {{ site.Title }}
{{ end }}

{{ define "main" }}
{{ $rss := .OutputFormats.Get "rss" }}
{{ $posts := .RegularPages }}
<div class="relative max-w-3xl md:max-w-5xl lg:max-w-7xl mx-auto px-6 lg:px-8 my-16 xl:grid xl:grid-cols-7 lg:gap-x-10">
  <div class="col-span-2">
    <div class="mb-4 md:mb-6">
      {{ partial "breadcrumb.html" . }}
    </div>

    <h2 class="dark:text-gray-50 font-secondary font-extrabold text-4xl md:text-5xl tracking-tight leading-tight">
      {{ .Title }}
    </h2>

    {{ with .Description }}
    <p class="dark:text-gray-200 mt-5 text-xl text-gray-500 prose dark:prose-dark">
      {{ . | markdownify }}
    </p>
    {{ end }}

    <div class="mt-8">
      <a type="button" href="{{ $rss.RelPermalink }}" class="inline-flex items-center px-3 py-1.5 space-x-1.5 border border-transparent shadow-sm text-xs md:text-sm leading-4 font-medium rounded text-white bg-rss-orange focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-rss-orange hover:bg-orange-600" rel="noopener" target="_blank">
        <ion-icon name="logo-rss"></ion-icon>
        <span>
          RSS
        </span>
      </a>
    </div>
  </div>

  <div class="col-span-5 sm:mt-8 mt-10 xl:mt-0">
    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
      {{ range $posts }}
      {{ .Render "blog-post-card" }}
      {{ end }}
    </div>
  </div>
</div>
{{ end }}